<!--  -->
<template>
  <el-form :inline="true" :label-width="formLabelWidth" class="demo-form-inline" @submit.native.prevent>
    <el-form-item label="内间距" style="margin-bottom:0px;">
      <el-form-item label="上" label-width="30px" style="margin-bottom:0px;">
        <el-input size="mini" style="width:80px;" @blur="paddingBlur(0)" v-model="paddingStyle[0]" maxlength="12">
        </el-input>
      </el-form-item>
      <el-form-item label="右" label-width="30px" style="margin-bottom:0px;">
        <el-input size="mini" style="width:80px;" @blur="paddingBlur(1)" v-model="paddingStyle[1]" maxlength="12">
        </el-input>
      </el-form-item>
      <el-form-item label="下" label-width="30px" style="margin-bottom:0px;">
        <el-input size="mini" style="width:80px;" @blur="paddingBlur(2)" v-model="paddingStyle[2]" maxlength="12">
        </el-input>
      </el-form-item>
      <el-form-item label="左" label-width="30px" style="margin-bottom:0px;">
        <el-input size="mini" style="width:80px;" @blur="paddingBlur(3)" v-model="paddingStyle[3]" maxlength="12">
        </el-input>
      </el-form-item>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data () {
    return {
      formLabelWidth: '120px',
      paddingStyle: ['0px', '0px', '0px', '0px']
    }
  },
  methods: {
    paddingBlur (index) {
      let value = this.paddingStyle[index]
      if (/^(\d+(px)?)$/.test(value)) {
        if (/^(\d|\.)+$/.test(value)) {
          this.paddingStyle[index] = value + 'px'
        } else {
          this.paddingStyle[index] = value
        }
      } else {
        this.paddingStyle[index] = isNaN(parseInt(value)) ? '0px' : parseInt(value) + 'px'
      }
      this.paddingStyle = JSON.parse(JSON.stringify(this.paddingStyle))
    },
    setPadding (pad) {
      this.paddingStyle = JSON.parse(JSON.stringify(pad))
    },
    getPadding () {
      return this.paddingStyle
    }
  }
}

</script>
